<template>
    <div>
        <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
        <div class="container">
            <TableCustom :columns="columns" :tableData="tableData" :total="page.total"
            :changePage="changePage" :change-page-size="changePageSize" :currentPage="page.page" :pageSize="page.page_size" :delSelection="delSelection">
                <template #toolbarBtn>
                    <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
                </template>
                <template #g_status="{rows}">
                    <el-tag v-if="rows.g_status == 1" type="success">在线</el-tag>
                    <el-tag v-else-if="rows.g_status == 2" type="info">借出</el-tag>
                    <el-tag v-else type="danger">遗失</el-tag>
                </template>
                <template #operator="{rows}">
                    <el-button type="danger" @click="handleDelete(rows)">删除</el-button>
                </template>
            </TableCustom>

        </div>
        <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
            :close-on-click-modal="false" @close="closeDialog">
            <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData"/>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="collaborativeAdministrator-user">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { CirclePlusFilled } from '@element-plus/icons-vue';
import { Place } from './types/place.js';
import { query_glasses_list, insert_glasses, delete_glasses, query_list } from '@/api';
import TableCustom from '@/components/table-custom.vue';
import TableSearch from '@/components/table-search.vue';
import { FormOption, FormOptionList } from '@/types/form-option';

// 查询相关
const query = reactive({
    g_type: null,
    g_code: null,
    status: null,
});
// 查询条件相关
const searchOpt = ref<FormOptionList[]>([
    { type: 'select', label: '眼镜分类：', prop: 'g_type', placeholder: '请选择眼镜分类', opts: [], valueItem: 't_code', labelItem: 't_type_name'},
    { type: 'select', label: '眼镜状态：', prop: 'status', placeholder: '请选择眼镜状态', opts: [{label: '在线', value: 1}, {label: '借出', value: 2}, {label: '遗失', value: 0}] },
    { type: 'input', label: '芯片序列号：', prop: 'g_code', placeholder: '请输入芯片序列号' }
])
const handleSearch = () => {
    console.log(query)
    changePage(1);
};
const getClassify = () => {
    query_list({"filter":"glasses_type"}).then(res => {
        searchOpt.value[0].opts = res.data;
        options.value.list[0].opts = res.data;
    })
}
getClassify()
const delSelection = (data) => {
    let g_code_list = []
    data.forEach(item => {
        g_code_list.push(item.g_code)
    })
    ElMessageBox.confirm('确定要删除吗？', '提示', {
        type: 'warning'
    })
        .then(async () => {
            delete_glasses({glasses_list: g_code_list }).then(res => {
                if (res.code == '1000') {
                    getData();
                    ElMessage.success('删除成功');
                }
            })
        })
        .catch(() => { });
}
// 表格相关
let columns = ref([
    {type: 'selection'},
    { prop: 't_type_name', label: '眼镜名称' },
    { prop: 'g_code', label: '芯片序列号' },
    { prop: 'g_status', label: '眼镜状态' },
    { prop: 'g_oupt_time', label: '最后使用时间' },
    { prop: 'g_input_time', label: '入库时间' },
    { prop: 'operator', label: '操作', width: 250 },
])
const page = reactive({
    page: 1,
    page_size: 10,
    total: 0,
})
const tableData = ref<Place[]>([]);
const getData = async () => {
    const res = await query_glasses_list({page: page.page, page_size: page.page_size, ...query})
    tableData.value = res.data.data_list;
    page.total = res.data.total;
};
getData();

const changePage = (val: number) => {
    page.page = val;
    getData();
};
const changePageSize = (val: number) => {
    page.page_size = val;
    getData();
};

// 新增/编辑弹窗相关
let options = ref<FormOption>({
    labelWidth: '150px',
    span: 20,
    list: [
        { type: 'select', label: '眼镜分类', prop: 'g_type', required: true, placeholder: '请选择眼镜类别', opts: [], valueItem: 't_code', labelItem: 't_type_name' },
        { type: 'textarea', label: '芯片序列号', prop: 'glasses_data', required: true, placeholder: '请输入芯片序列号' },
    ]
})
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref({});
const updateData = async(value) => {

    const sentData = JSON.parse(JSON.stringify(value))
    delete sentData.field_area

    console.log(sentData)
    const res = await insert_glasses(sentData)
    if (res.code == '1000') {
        closeDialog();
        getData();
    }

};

const closeDialog = () => {
    visible.value = false;
    isEdit.value = false;
};

// 查看详情弹窗相关
const visible1 = ref(false);
const viewData = ref({
    row: {},
    list: []
});

// 删除相关
const handleDelete = (row: Place) => {
    ElMessageBox.confirm('确定要删除吗？', '提示', {
        type: 'warning'
    })
        .then(async () => {
            delete_glasses({glasses_list: [row.g_code] }).then(res => {
                if (res.code == '1000') {
                    getData();
                    ElMessage.success('删除成功');
                }
            })
        })
        .catch(() => { });
    
}
</script>

<style scoped></style>